<template>
  <div>
    <el-card style="margin-top: 10px" class="box-card">
      <el-table size="medium" :data="roleList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="150px">
        </el-table-column>
        <el-table-column prop="title" label="名称"> </el-table-column>
        <el-table-column prop="describe" label="描述"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openClick(scope.row.id)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="配置角色"
      :visible.sync="dialogVisible"
      width="600"
    >
      <el-tree
        :data="data"
        show-checkbox=""
        node-key="id"
        :props="{children: 'children', id: 'id', label: 'permissionName'}"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, getPermission, getPermissionList } from "../../api/role";
export default {
  data() {
    return {
      roleList: [],
      dialogVisible: false,
      data: [],
    };
  },
  mounted() {
    this.getRoleList();
    this.getPermissionLIst();
  },
  methods: {
    async getRoleList() {
      let res = await getRoleList();
      console.log(res);
      this.roleList = res;
    },
    async openClick(id){
        this.dialogVisible = true
        let res = await getPermission(id)
        console.log(res);
    },
    async getPermissionLIst(){
        let res = await getPermissionList();
        console.log(res);
        this.data = res
    }
  },
};
</script>

<style scoped >
</style>
